<template>
  <div class="login">
    <el-card class="box-card login_card">
      <div slot="header" class="clearfix">
        <el-image class="login_card_img" :src="logo_img" fit="cover"></el-image>
        <p class="login_card_title">登录</p>
        <p class="login_card_desc">欢迎登录街圈文化后台系统</p>
      </div>
      <div>
        <el-form ref="ruleForm" :model="ruleForm" inline="inline" :rules="rules">
          <el-form-item prop="username">
            <el-input class="login_card_input" placeholder="请输入管理员账号" v-model="ruleForm.username" prefix-icon="el-icon-user"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input show-password class="login_card_input" placeholder="请输入管理员密码" v-model="ruleForm.password" prefix-icon="el-icon-lock"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="login_card_button" :loading="loginLoading" @click="submitForm('ruleForm')">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
    data() {
      let validateInput = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('输入不能为空'))
        }else{
          callback();
        }
      }
      return{
        logo_img:require('../assets/img.png'),
        loginLoading:false,
        ruleForm:{
          username:'',
          password:'',
        },
        rules: {
          username:[
            {validator:validateInput,require: true, message:'请输入管理员账号', trigger:'blue'},
          ],
          password:[
            {validator:validateInput,require: true, message:'请输入管理员密码', trigger:'blue'},
          ]
        },
      }
    },
    methods:{
      submitForm(formName) {
        this.$refs[formName].validate((valid)=>{
          if (valid){
            this.$axios.get('api/backendlogin/',{
              params:{username:this.ruleForm.username,password:this.ruleForm.password}
            }).then((response)=>{
              const res = response.data
              if (res['respCode'] === '000000'){
                sessionStorage.setItem('user',res['user'])
                sessionStorage.setItem('token',res['token'])
                console.log('登录成功')
                this.$router.push('/backendIndex')
              }else {
                this.$message.error(res['respMsg'])
                this.loginLoading = false
                console.log('登录失败')
              }
            })
          }else {
            return false
          }
        })
      },
    },
  }
</script>

<style scoped>
.login {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("../assets/后台登录背景.jpg");
  left: 0;
  right: 0;
}
.login_card {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom:0;
  margin: auto;
  width: 20%;
  max-height: 500px;
  border-radius: 10px;
  text-align: center;
}
.login_card_img {
  height: 30px;
}
.login_card_title {
  font-size: 25px;
  font-weight: bold;
}
.login_card_desc {
  font-size: 17px;
  color: #cccccc;
}
.login_card_input {
  width: 250px;
}
.login_card_button {
  width: 250px;
}
</style>
